<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Cirodown editor demo</title>
<link rel="stylesheet" href="cirodown.min.css">
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#container {
  align-items: center;
  display: flex;
  height: 100%;
  padding: 10px;
}
#input {
  border: 1px black solid;
  flex-grow: 1;
  height: 100%;
  margin: 0 5px 0 0;
  overflow: auto;
  width: 50%;
}
#output-container {
  border: 1px black solid;
  flex-grow: 1;
  height: 100%;
  margin: 0 0 0 5px;
  overflow: auto;
  width: 50%;
}
</style>
</head>
<body>
<div id="container">
<div id="input" contenteditable="true"></div>
<div id="output-container" class="cirodown">
<div id="output">
</div>
</div>
</div>
</body>
<script src="cirodown.js"></script>
<script>
let input_elem = document.getElementById('input');
let output_elem = document.getElementById('output');
input_elem.addEventListener('input', function() {
  output_elem.innerHTML = cirodown.convert(
      input_elem.innerText, {'body_only': true});
}, false);
</script>
</html>
